<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面尺寸事件</title>
    <style>
        div {
            display: inline-block; /* 显示模式: 行级块 */

            /* width: 200px; */
            height: 200px; /* 高, 宽度随内容撑开 */

            background-color: pink; /* 背景色 */
            padding: 10px; /* 内边距 */
            border: 20px solid red; /* 边框线 */
        }
    </style>
</head>
<body>

<h3>页面尺寸事件</h3>
<p>
    会在窗口尺寸改变的时候触发事件： <br>
    resize
</p>
<pre style="font-size: 20px;">
 window.addEventListener('resize', function () {
  // 执行的代码
})
</pre>
<hr>

<h3>页面尺寸事件-获取元素宽高</h3>
<p>
    获取宽高： <br>
    获取元素的可见部分宽高（不包含边框线，margin外边距，滚动条等. 但包括 padding内边距） <br>
    clientWidth和clientHeight
</p>
<hr>

<div>盒子文字 盒子文字 盒子文字 盒子文字 盒子文字 盒子文字 盒子文字 盒子的宽度</div>

<script>

    // 检查整个网页页面的宽度
    // window是当前窗口 document是文档
    window.addEventListener('resize', function () {
        let 页面宽度 = document.documentElement.clientWidth
        console.log(`整个页面宽度是: ${页面宽度}`) // 放大缩小页面, 看控制台信息
    })

    // 获取DOM元素
    const div盒子 = document.querySelector('div')
    // 控制台输出, 盒子的宽度
    console.log(`盒子的宽度: ${div盒子.clientWidth}`)
</script>
</body>
</html>